<template>
  <div class="head flex align-center justify-between">
    <div class="relative w-100 flex flex-s">
      <div class="text-14 text-222 text-bold">{{ title }}</div>
      <div class="icons flex gc-10 align-center">
        <img :src="searchPng" width="16" />
        <img :src="plusCircle" width="16" @click="setting" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import plusCircle from '@/assets/images/plus.png';
  import searchPng from '@/assets/images/search.png';

  const emit = defineEmits(['setting']);
  defineProps<{
    title: string;
  }>();
  const setting = () => {
    emit('setting');
  };
</script>

<style lang="scss" scoped>
  .head {
    height: var(--head-height);
    background-color: #ededed;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
    .icons {
      position: absolute;
      right: 0;
    }
  }
</style>
